<template>
  <div>
    <CloudSteps>
      <CloudStep status="finish" title="Login">
        <CloudIcon slot="icon" type="user" />
      </CloudStep>
      <CloudStep status="finish" title="Verification">
        <CloudIcon slot="icon" type="solution" />
      </CloudStep>
      <CloudStep status="process" title="Pay">
        <CloudIcon slot="icon" type="loading" />
      </CloudStep>
      <CloudStep status="wait" title="Done">
        <CloudIcon slot="icon" type="smile-o" />
      </CloudStep>
    </CloudSteps>
  </div>
</template>

<script>
export default {
  title: '2.自定义图标步骤条',
  data() {
    return {
    }
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>
.cloud-steps {
  min-height: 40px;
  display: flex;
  align-items: center;
}
</style>